// common.js语法
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
// const UglifyjsWebPackPlugin=require('uglifyjs-webpack-plugin')
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),//动态absolute path必须
    filename: 'bundle.js',
  },
  // 配置插件plugin
  plugins: [
    new htmlWebpackPlugin({
      template: path.resolve(__dirname, "index.html"), //自己写的页面
      filename: "index.html", //经过webpack打包生成在dist->文件夹下的页面也叫index.html
      minify: {
        removeAttributeQuotes: true // 移除属性的引号使得文件体积更小。
      }

    }),
    // 开发时候不需要丑化js.发布时候需要压缩丑化js
    // new UglifyjsWebPackPlugin()
  
  ],
  // 配置第三方loader
  module: {
    rules: [
      // 打包css文件
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      // 打包less文件
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"]
      },
      // 图片模块file-loader  url-loader(适用于小图片)
      // url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl打包进css文件，大于limit的还会使用file-loader进行copy
      //在dist文件里面重新生成一张图片
      // 1kb=1000B 字节
      {
        test: /\.(jpg|png|gif|bmp|jpeg)$/,
        use: ["url-loader?limit=40000&name=[hash:8]-[name].[ext]"] //40kb
      },
      // 字体文件
      {
        test: /\.(ttf|woff|woff2|eot|svg)$/,
        use: ["url-loader"]
      },
      // es6转es5.打包js文件
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        loader: ['vue-loader']
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json', '.vue'], // 表示，这几个文件的后缀名，可以省略不写
    alias: {
      '@': path.join(__dirname, './src'), // 这样，@ 就表示 项目根目录中 src 的这一层路径
      'vue$': 'vue/dist/vue.esm.js'  //指定vue包的引入路径 vue有很多版本。默认是vue.runtime.min.js

    }
  }
}